dojo.provide("dojot.util.AutoComplete");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.dtl.html");
dojo.require("dojox.dtl.render.html");
dojo.require("dojox.dtl.Context");
dojo.declare("dojot.util.AutoComplete",[dijit._Widget,dijit._Templated],{
    templateString:"<div class='auto' dojoAttachPoint='outerNode'>"
                    +"<input id='t1' type='text' dojoAttachPoint='input' size='55' maxlength='50' autocomplete='off'  dojoAttachEvent='onkeypress:_onKeypress'/>"
                    +"<ul class='gac_m' dojoAttachPoint='autoText'></ul></div>",
    postCreate:function(obj){
            //获取autoComplete对象
        this.items = [];
        //放一个空元素，为输入的文本留得位置，google的做法是把输入的东西在一个隐藏的input框里面。我们暂时先放到
        //这个数组中吧。
        this.items.push("");
        //获取需要添加autoComplete的元素，并得到它的位置对象			
        var marginBox = dojo.marginBox(dojo.byId("t1"));
        //console.log((marginBox.t + marginBox.h)+'px');

        dojo.style(this.autoText,{					
            top:(marginBox.t + marginBox.h-1)+'px',
            left:(marginBox.l)+'px',
            width:(marginBox.w-2) + 'px',
            display:"none"
        });	
        dojo.connect(this.input,"onblur",dojo.hitch(this,"_onBlur"));
            //给每个子元素添加事件。
            //我们用不用维护一个li数组呢？这样的话，我们就可以快速的定位到某个元素了呀！这个主意不错
            //这样就可以对于我们的上下选择可以很方便了。但是google有一个就是当我们用上下键选择元素的时候，我们可以
            //在选则到输入框的时候，会出现我们最后输入的那个值。换句话说，就是如果我们在文本框里面写了java,然后我们
            //选择到第十个的时候，然后再往下选择，就应该到输入框这个位置了。然后在输入框里面还要显示出原来我们保存的那个
            //值，这样就实现了，我们连续鼠标滚动了呀！
    
    },
    _onKeypress:function(evt){
        //只是响应keyup事件，不响应keyperss和keydown事件
            //console.log("_onKeyPress--------------------");
        var key = evt.charOrCode;
        //console.log(evt.type);
        //如果是下面这些按键跳出
        if(evt.altKey || (evt.ctrlKey && (key != 'x' && key != 'v')) || evt.key == dojo.keys.SHIFT){
                return; // throw out weird key combinations and spurious events
        }
        //我们的搜索给取消，
        var doSearch = false;
        var pw = this._popupWidget;
        var dk = dojo.keys;
        //如果目前正在显示list，就交给
        if(this._isShowingNow){
                //pw.handleKey(key);
        }
        //console.log("dk.DOWN_ARROW-->"+dk.DOWN_ARROW);
        switch(key){
                //如果是向下按键			
            case dk.DOWN_ARROW:
                //console.log("DOWN_ARROW");
                if(!this._isShowingNow){
                        this.showAutoCompleteText();
                }else{
                        this._highlightOption(null,this._highlighted_index + 1);
                }
                dojo.stopEvent(evt);
                break;
            //如果是向上键
            case dk.UP_ARROW:
                if(!this._isShowingNow){
                        this.showAutoCompleteText();
                }else{
                        this._highlightOption(null,this._highlighted_index - 1);
                }
                dojo.stopEvent(evt);
                break;
            case dk.ENTER:
                //处理用户回车事件，加入咱们自己的处理
                console.log("Entre");
                var highlighted;
                //如果处于当前选中状态，并且有当前选中的元素
                console.log(this.getHighlightedOption());
                if(this._isShowingNow && (highlighted = this.getHighlightedOption())){		
                        this.closeAutoCompleteText();
                        //可能需要加表单提交事件
                }
                evt.preventDefault();
            case dk.TAB:
                var newvalue = this.attr('displayedValue');
                // #4617: 
                //		if the user had More Choices selected fall into the
                //		_onBlur handler
                var highlighted;
                if(this._isShowingNow && (highlighted = this.getHighlightedOption())){				
                        this.setInputValue(highlighted.innerHTML);
                        this.closeAutoCompleteText();
                }
                break;
            case ' ':
                var highlighted;
                if(this._isShowingNow && (highlighted = this.getHighlightedOption())){				
                        this.setInputValue(highlighted.innerHTML);
                        this.closeAutoCompleteText();
                }else{
                        doSearch = true;
                }
                break;

            case dk.ESCAPE:
                this._prev_key_backspace = false;
                this._prev_key_esc = true;
                if(this._isShowingNow){
                        dojo.stopEvent(evt);
                        this.closeAutoCompleteText();
                }
                break;	
            case dk.DELETE:
            case dk.BACKSPACE:
                doSearch = true;
                break;
            default: // non char keys (F1-F12 etc..)  shouldn't open list
                doSearch = typeof key == 'string';
                            
            }
            if(this.searchTimer){
                clearTimeout(this.searchTimer);
            }
            if(doSearch){
                //因为响应的事件是kerpress,我们的值需要keyup后才能得到，所以延迟点时间，
                //才能获取我们真正想要的值
                setTimeout(dojo.hitch(this, "_startSearchFromInput"),1);	
            }
    },
    _startSearchFromInput:function(){
            //搜索数据
            var value = this.input.value;
            //console.log(value);
            //清空原来的数据
            this.items = [];
            //加入新的数据
            this.items[0] = value;
            //假装返回的数据
            this.context = [value+"apple", value+"banana", value+"orange"];
            this.autoText.innerHTML = "";
            //绑定数据
            this._generateDataAndBind();
            //显示
            this.showAutoCompleteText();
    },
    _generateDataAndBind:function(){
    //console.log("--------------------------------------_generateDataAndBind");
            this._highlighted_index = 0;
            this.createOptions();	
    },
    //高亮选中的item
    _highlightOption:function(item,index){
            //需要把上一个选中的元素的高亮给清除，然后重新设置当前选中元素。
                    //console.log("_highlightOption-----------------"+index);
            if(this._highlighted_option){
                    dojo.removeClass(this._highlighted_option,"gac_b");
            }	
            //重新设置当前高亮元素
            var length = this.getListLength();
            
            index = index < 0 ? (index + length) : index % length ;

            this._highlighted_index = index;	
            item = item || this.items[index];
            if(index == 0){
                    this._highlighted_option = null;		
                    this.input.value = item;
            }else{
                if(item){
                    this._highlighted_option = item;
                    dojo.addClass(item,"gac_b");
                    this.input.value = item.innerHTML;
                }
            }
    },
    showAutoCompleteText:function(){
        dojo.style(this.autoText,{
                display:"block"
        });	
        this._isShowingNow = true;
    },
    closeAutoCompleteText:function(){
        dojo.style(this.autoText,{					
                display:"none"
        });
        this._isShowingNow = false;
    },
    //返回当前选中的option，或者指定索引的option
    getHighlightedOption:function(index){
        return (index && this.items[index]) || this._highlighted_option;
    },
    setInputValue:function(value){
        dojo.attr(this.input,"attr",value);
    },
    createOptions: function(results){
        //var ul = dojo.create("ul", null, this.autoText, "first");
        //var items = ["one", "two", "three", "four"];
        //var items = results.items;
        var that = this;
        dojo.forEach(this.context, function(data,index){
          var node = dojo.create("li", { innerHTML: data}, that.autoText);			 
          that.items.push(node);
          dojo.connect(node,"onmouseover",function(evt){
                        that._highlightOption(node,index+1);
          })
        });

    },
    clearResultList: function(){
            
    },
    // these functions are called in showResultList
    getItems: function(){	
        return this.items;			
    },
    getItem: function(index){
        var length = this.getListLength();
        return this.items[index > 0 ? index % length : (index + length)];
    },
    getListLength: function(){
         return this.items.length;
    },
    _onBlur: function(){
        this.closeAutoCompleteText();
    },
    _onMouseOver:function(){
        console.log('oooooo0');
    }
});